<template>
  <div>
    <a-modal v-model:open="open" style="min-width: 360px;" :width="isFullscreen ? '100%' : '50%'"
      :wrap-class-name="isFullscreen ? 'full-modal' : ''" title="Title" @ok="handleOk">
      <a-form layout="vertical" :model="formState">
        <a-row :gutter="24">
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段1">
              <a-input v-model:value="formState.field1" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段2">
              <a-input v-model:value="formState.field2" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段1">
              <a-input v-model:value="formState.field1" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段2">
              <a-input v-model:value="formState.field2" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段1">
              <a-input v-model:value="formState.field1" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字段2">
              <a-input v-model:value="formState.field2" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="长文本">
              <a-textarea v-model:value="formState.longText" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <template #footer>
        <div style="width:100%;display: flex;justify-content: space-between;align-items: center;">
          <a-tooltip :title="isFullscreen ? '退出全屏' : '全屏'">
            <a-button type="primary" @click="isFullscreen = !isFullscreen" shape="circle"
              :icon="h(isFullscreen ? FullscreenExitOutlined : FullscreenOutlined)" />
          </a-tooltip>
          <div>
            <a-button key="back" @click="handleCancel" type="primary" danger>重置</a-button>
            <a-button key="back" @click="handleCancel">取消</a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
          </div>
        </div>

      </template>
    </a-modal>
    <a-button @click="open = true" type="primary">弹窗</a-button>
  </div>
</template>

<script setup lang="ts">
import { h, reactive } from "vue";
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
const open = ref(false);
const isFullscreen = ref(false);
const loading = ref(false);

const formState = reactive({
  field1: '',
  field2: '',
  longText: ''
});

const handleOk = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    open.value = false;
  }, 3000);
};
const handleCancel = () => {
  open.value = false;
};
</script>

<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>